<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情 - 护工助手</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/training.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159099_1wqzwg0e9ck.css">
    <style>
        .video-container {
            position: relative;
            width: 100%;
            background-color: #000;
            overflow: hidden;
        }
        
        .video-player {
            width: 100%;
            aspect-ratio: 16/9;
            background-color: #000;
            object-fit: contain;
        }
        
        .video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 20px 16px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .control-left {
            display: flex;
            align-items: center;
            color: white;
        }
        
        .play-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        
        .time-info {
            font-size: 12px;
        }
        
        .control-right {
            display: flex;
            align-items: center;
            gap: 16px;
            color: white;
        }
        
        .course-info-container {
            padding: var(--spacing-md);
            background-color: var(--bg-white);
        }
        
        .course-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 8px;
        }
        
        .course-stats {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 16px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
        }
        
        .stat-item i {
            margin-right: 4px;
            font-size: 14px;
        }
        
        .progress-section {
            margin-top: 16px;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .progress-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .progress-percent {
            font-size: 14px;
            color: var(--primary-color);
            font-weight: 500;
        }
        
        .course-tabs {
            display: flex;
            background-color: var(--bg-white);
            margin-top: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
        }
        
        .course-tab {
            flex: 1;
            padding: var(--spacing-md);
            text-align: center;
            font-size: 14px;
            color: var(--text-secondary);
            position: relative;
        }
        
        .course-tab.active {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        .course-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            right: 25%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }
        
        .chapter-list {
            background-color: var(--bg-white);
            padding: 0 var(--spacing-md);
        }
        
        .chapter-item {
            border-bottom: 1px solid var(--border-color);
            padding: var(--spacing-md) 0;
        }
        
        .chapter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .chapter-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .chapter-duration {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .lesson-list {
            margin-top: 8px;
        }
        
        .lesson-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-top: 1px solid var(--border-color);
        }
        
        .lesson-status {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
            color: white;
            font-size: 12px;
        }
        
        .lesson-status.completed {
            background-color: var(--success-color);
        }
        
        .lesson-status.current {
            background-color: var(--primary-color);
        }
        
        .lesson-info {
            flex: 1;
        }
        
        .lesson-title {
            font-size: 14px;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .lesson-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-light);
        }
        
        .action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--bg-white);
            display: flex;
            padding: 12px var(--spacing-md);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .action-btn {
            flex: 1;
            height: 40px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
        }
        
        .btn-collect {
            background-color: var(--bg-light);
            color: var(--text-secondary);
            margin-right: 12px;
        }
        
        .btn-collect i {
            margin-right: 4px;
        }
        
        .btn-continue {
            background-color: var(--primary-color);
            color: white;
        }
        
        .related-courses {
            margin: var(--spacing-md);
            padding-bottom: 80px;
        }
        
        .related-header {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: var(--spacing-md);
            color: var(--text-primary);
        }
        
        .related-list {
            display: flex;
            gap: var(--spacing-md);
            overflow-x: auto;
            padding-bottom: var(--spacing-sm);
            -webkit-overflow-scrolling: touch;
        }
        
        .related-list::-webkit-scrollbar {
            height: 4px;
        }
        
        .related-list::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">14:25</span>
                <div class="status-icons">
                    <span class="icon-wifi"></span>
                    <span class="icon-signal"></span>
                    <span class="icon-battery">80%</span>
                </div>
            </div>
            <div class="header-content">
                <a href="course-list.html" class="back-btn">
                    <i class="icon-back"></i>
                </a>
                <h1>课程详情</h1>
                <div class="header-actions">
                    <a href="#" class="icon-share"></a>
                </div>
            </div>
        </header>

        <!-- 视频播放器 -->
        <div class="video-container">
            <video class="video-player" poster="images/course1-poster.jpg">
                <source src="videos/course1.mp4" type="video/mp4">
                您的浏览器不支持视频播放
            </video>
            <div class="video-controls">
                <div class="control-left">
                    <div class="play-btn">
                        <i class="icon-play"></i>
                    </div>
                    <div class="time-info">00:25 / 15:30</div>
                </div>
                <div class="control-right">
                    <i class="icon-fullscreen"></i>
                </div>
            </div>
        </div>

        <!-- 课程信息 -->
        <div class="course-info-container">
            <h2 class="course-title">老年人心理健康关怀</h2>
            <div class="course-stats">
                <div class="stat-item">
                    <i class="icon-time"></i>
                    <span>总时长: 2.5小时</span>
                </div>
                <div class="stat-item">
                    <i class="icon-user"></i>
                    <span>3,256人学习</span>
                </div>
                <div class="stat-item">
                    <i class="icon-star"></i>
                    <span>4.9分</span>
                </div>
            </div>
            <div class="progress-section">
                <div class="progress-header">
                    <div class="progress-title">学习进度</div>
                    <div class="progress-percent">65%</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 65%"></div>
                </div>
            </div>
        </div>

        <!-- 课程标签页 -->
        <div class="course-tabs">
            <div class="course-tab active">章节</div>
            <div class="course-tab">介绍</div>
            <div class="course-tab">评价</div>
            <div class="course-tab">问答</div>
        </div>

        <!-- 章节列表 -->
        <div class="chapter-list">
            <div class="chapter-item">
                <div class="chapter-header">
                    <div class="chapter-title">第一章：老年人心理特点</div>
                    <div class="chapter-duration">45分钟</div>
                </div>
                <div class="lesson-list">
                    <div class="lesson-item">
                        <div class="lesson-status completed">
                            <i class="icon-check"></i>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">1.1 老年人常见心理特点</div>
                            <div class="lesson-meta">
                                <span>15分钟</span>
                                <span>已完成</span>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-item">
                        <div class="lesson-status completed">
                            <i class="icon-check"></i>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">1.2 老年人心理需求分析</div>
                            <div class="lesson-meta">
                                <span>20分钟</span>
                                <span>已完成</span>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-item">
                        <div class="lesson-status current">
                            <i class="icon-play"></i>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">1.3 老年人心理健康评估</div>
                            <div class="lesson-meta">
                                <span>10分钟</span>
                                <span>学习中</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chapter-item">
                <div class="chapter-header">
                    <div class="chapter-title">第二章：常见心理问题</div>
                    <div class="chapter-duration">60分钟</div>
                </div>
                <div class="lesson-list">
                    <div class="lesson-item">
                        <div class="lesson-status">
                            <span>2.1</span>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">2.1 老年抑郁症的识别</div>
                            <div class="lesson-meta">
                                <span>20分钟</span>
                                <span>未学习</span>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-item">
                        <div class="lesson-status">
                            <span>2.2</span>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">2.2 老年焦虑的表现</div>
                            <div class="lesson-meta">
                                <span>15分钟</span>
                                <span>未学习</span>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-item">
                        <div class="lesson-status">
                            <span>2.3</span>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">2.3 孤独感与应对</div>
                            <div class="lesson-meta">
                                <span>25分钟</span>
                                <span>未学习</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chapter-item">
                <div class="chapter-header">
                    <div class="chapter-title">第三章：心理关怀技巧</div>
                    <div class="chapter-duration">45分钟</div>
                </div>
                <div class="lesson-list">
                    <div class="lesson-item">
                        <div class="lesson-status">
                            <span>3.1</span>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">3.1 有效沟通方法</div>
                            <div class="lesson-meta">
                                <span>15分钟</span>
                                <span>未学习</span>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-item">
                        <div class="lesson-status">
                            <span>3.2</span>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">3.2 情绪安抚技巧</div>
                            <div class="lesson-meta">
                                <span>15分钟</span>
                                <span>未学习</span>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-item">
                        <div class="lesson-status">
                            <span>3.3</span>
                        </div>
                        <div class="lesson-info">
                            <div class="lesson-title">3.3 心理支持方法</div>
                            <div class="lesson-meta">
                                <span>15分钟</span>
                                <span>未学习</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关课程 -->
        <div class="related-courses">
            <h3 class="related-header">相关课程推荐</h3>
            <div class="related-list">
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course9.jpg" alt="失智老人照护">
                    </div>
                    <div class="course-brief">
                        <h3>失智老人照护与沟通技巧</h3>
                        <div class="course-stats">
                            <span>4小时</span>
                            <span>4.9分</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course3.jpg" alt="中风康复护理">
                    </div>
                    <div class="course-brief">
                        <h3>中风康复护理与日常训练</h3>
                        <div class="course-stats">
                            <span>3小时</span>
                            <span>4.8分</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course12.jpg" alt="护工职业素养">
                    </div>
                    <div class="course-brief">
                        <h3>护工职业素养与服务礼仪</h3>
                        <div class="course-stats">
                            <span>1.5小时</span>
                            <span>4.9分</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="action-bar">
            <div class="action-btn btn-collect">
                <i class="icon-star-o"></i>
                <span>收藏</span>
            </div>
            <div class="action-btn btn-continue">
                <span>继续学习</span>
            </div>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        // 视频播放控制
        const videoPlayer = document.querySelector('.video-player');
        const playBtn = document.querySelector('.play-btn');
        
        playBtn.addEventListener('click', function() {
            if (videoPlayer.paused) {
                videoPlayer.play();
                playBtn.innerHTML = '<i class="icon-pause"></i>';
            } else {
                videoPlayer.pause();
                playBtn.innerHTML = '<i class="icon-play"></i>';
            }
        });
        
        // 课程标签页切换
        document.querySelectorAll('.course-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelector('.course-tab.active').classList.remove('active');
                this.classList.add('active');
                // 这里可以添加切换内容的逻辑
            });
        });
        
        // 课程章节展开收起
        document.querySelectorAll('.chapter-header').forEach(header => {
            header.addEventListener('click', function() {
                const lessonList = this.nextElementSibling;
                if (lessonList.style.display === 'none') {
                    lessonList.style.display = 'block';
                } else {
                    lessonList.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html> 